<!--
 * @Author: zgx 2324461523@qq.com
 * @Date: 2024-01-29 22:36:43
 * @LastEditors: zgx 2324461523@qq.com
 * @LastEditTime: 2024-01-31 17:35:30
 * @FilePath: \tph_shop\src\pages\index\components\customNavbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="navbar_box" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
    <view class="title_box">
      <view style="width: 200rpx; height: 60rpx">
        <image src="@/static/images/logo.png" style="width: 100%; height: 100%" />
      </view>
      <text style="margin: 0 20rpx 0 10rpx" class="tag_box">|</text>
      <text class="tag_box" style="padding-top: 4rpx">正品 · 快捷 · 亲民</text>
    </view>
    <view class="search_box">
      <!--  @iconClick="iconClick"  -->
      <uni-easyinput
        prefixIcon="search"
        suffixIcon="scan"
        placeholder="搜索商品"
        :trim="true"
      ></uni-easyinput>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  options: { styleIsolation: 'shared' },
  setup() {
    // 屏幕安全距离
    const { safeAreaInsets } = uni.getSystemInfoSync()
    return {
      safeAreaInsets
    }
  },
})
</script>

<style lang="scss">
.navbar_box {
  background-color: #f42433;
  color: #ffffff;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 20rpx;
  .title_box {
    display: flex;
    align-items: center;
    height: 60rpx;
    margin: 15rpx 0 20rpx 0;
    .tag_box {
      padding-bottom: 8rpx;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.7);
    }
  }
  .search_box {
    border-radius: 36rpx;
    overflow: hidden;
    :deep(.uniui-search) {
      font-size: 18px !important;
    }
  }
}
</style>
